<template>
    <div>
    <div id="background"></div>
    <div id="poster">
        
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="0px" lable-position="left" class="register-container">
            <h3 class="register_title">
                系统注册
              </h3>
              <el-form-item label="" prop="loginName">
                <el-input type="text" style="width: 300px;margin-left: 23px" v-model="ruleForm.username" placeholder="请输入账号" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input>
              </el-form-item>
              <el-form-item label="" prop="name">
                <el-input type="text" style="width: 300px;margin-left: 23px" v-model="ruleForm.name" placeholder="请输入网名" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input>
              </el-form-item>
            <el-form-item label="" prop="password">
              <el-input type="password"
               v-model="ruleForm.password"
                autocomplete="off"
                style="width: 300px;margin-left: 23px;"
                prefix-icon="el-icon-lock"
            placeholder="请输入密码">
            </el-input>
            </el-form-item>
            <el-form-item label="" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请确认密码" style="width: 300px;margin-left: 23px;" prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
           
            <el-form-item>
              <el-button type="primary" style="background:#505428;border:none;vertical-align:middle;
        text-align: center;line-height: 4px;padding-left: 12px;margin-left: 23px;width: 300px" @click="submitForm(ruleForm)">注册</el-button>
              <el-button type="primary" style="background:#505428;border:none;vertical-align:middle;
        text-align: center;line-height: 4px;padding-left: 12px;margin-left: 23px;width: 300px" @click="back">退出</el-button>

            </el-form-item>
          </el-form>
    </div>
</div>
</template>

<script>
    export default{
        name:'Register',
        data() {

      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          username: '',
          password: '',
          name: '',
          ad:'0',
          id:''
        },
        rules: {
          //   loginName: [
          //   { required: true,Message:"请输入你的名称", trigger: 'blur' },
          //   { min: 2,max:9,Message:"长度2-9个字符", trigger: 'blur' }
          // ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
        
        }
      };
    },
    methods: {
      submitForm(ruleForm) {
        this.$axios.post('http://localhost:9090/save', this.ruleForm).then((res) => {
          let data = res.data;
            this.$message({
              message: '恭喜你，注册成功',
              type: 'success',
            });

        })
        
           
      
      },
     back(){
        this.$router.push({path:"/head"})
     }
    }
    }
</script>

<style>
    #poster {
      background-position: center;
      height: 100%;
      width: 100%;
      border-style: cover;
      position: fixed;
      margin: 0px;
      padding: 0px;
    }
  

  
    .register-container {
      border-radius: 15px;
      background-clip: padding-box;
      margin: 90px auto;
      width: 350px;
      background: #fff;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
    }
  
    .register_title {
      margin: 8px auto 30px auto;
      text-align: center;
      color: #505458;
    }
    #background {
  /*background: url("../assets/234.jpg") no-repeat;*/
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  top: 0px;
position: fixed;
}
  </style>